<template>
  <!-- <div> -->
    <s-table
      class="h100"
      ref="flowConfigTable"
      :columns="columns"
      :data="loadData"
      :showPagination="true"
      rowKey="key"
      :scrollX="890"
    >
      <template #instanceName="text, record">
        <auth-text :auth="todoPerms.draft.draftView" @click="viewDraftDetail(record)"><table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="record.instanceName">
        </table-ellipsis></auth-text>
      </template>
      <template #businessName="text, record">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="record.businessName">
        </table-ellipsis>
      </template>
      <template #creator="text, record">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="record.createBy">
        </table-ellipsis>
      </template>
      <template slot="createTime" slot-scope="text">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="text ? $options.filters.moment(text) : '_'">
        </table-ellipsis>
      </template>
      <template #operation="text">
      <span style="display: flex;">
        <span class="set-margin">
          <auth-button type="primary" :ghost="true" size="small" :auth="todoPerms.draft.draftEdit" @click="edit(text)"><a-icon type="edit" />{{ $t('edit') }}</auth-button>
        </span>
        <span>
          <auth-button type="danger" :ghost="true" size="small" :auth="todoPerms.draft.draftDelete" @click="deleteTb(text)"><i class="iconfont icon-shanchu deleteUlr"/>{{ $t('delete') }}</auth-button>
        </span>
      </span>
      </template>
    </s-table>
  <!-- </div> -->
</template>
<script>
import { mapState } from 'vuex'
import STable from '@/components/Table/index'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { draftTbColumns } from '../config/list'
import AuthText from '@/components/AuthText'
import { todoPerms } from '@/config/permission/index'
import AuthButton from '@/components/AuthButton'
import log from '@/api/modules/log'

export default {
  components: {
    STable,
    tableEllipsis,
    AuthText,
    AuthButton
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.myApply.queryParamsDraft
    })
  },
  data () {
    return {
      selectedRowKeys: [],
      columns: draftTbColumns,
      todoPerms
    }
  },
  methods: {
    // 请求数据加载表格
    loadData (parameter) {
      const vm = this
      // 如果是全部则不传值给后端
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParams))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
        if (JnqueryParam[key] instanceof Array) {
          JnqueryParam[key] = JnqueryParam[key].toString()
        }
      }
        console.log('parameter',parameter);
        console.log('JnqueryParam',JnqueryParam);

      return this.$api.getDraftList({ ...parameter, ...JnqueryParam })
    },
    // 刷新表格
    refreshData (isToFirstPage = true) {
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.flowConfigTable.loadData(obj)
    },
    // 跳转草稿详情
    viewDraftDetail (data) {
      // t 表示软件管控的表单来源，1代表新建表单，2代表查看表单，3代表编辑表单草稿，4代表查看表单草稿
      // eslint-disable-next-line max-len
      this.$router.push({ path: '/todo/view-draft', query: { id: data.id, t: 4, code: data.businessCode, key: data.businessKey } })
    },
    // 编辑草稿
    edit (data) {
      // t 表示软件管控的表单来源，1代表新建表单，2代表查看表单，3代表编辑表单草稿，4代表查看表单草稿
      this.$router.push({ path: '/todo/edit-draft',
        query: {
          id: data.id,
          t: 3,
          key: data.businessKey,
          name: data.instanceName
        } })
    },
    // 删除草稿
    deleteTb (data) {
      const that = this
      that.$confirm({
        title: that.$t('tip'),
        content: that.$t('deleteDraftTip').replace('__Content__', '"' + data.instanceName + '"'),
        onOk () {
          that.$api.deleteMyDraftApply([data.id]).then(() => {
            that.$message.success(that.$t('successfullyDelete'))
            that.refreshData(true)
          })
        },
        onCancel () { }
      })
    }
  },
  beforeDestroy () {
    // 销毁组件之前清空搜索条件
    this.$store.commit('resetDraftQueryParams')
  }
}
</script>
<style lang="less" scoped>
.set-margin {
  margin-right: 12px;
}
</style>
